<template>
  <div style="height:97%;overflow-y:auto" class="form-ctl">
    <a-form-model ref="form" :model="data" :rules="rules" v-bind="layout">
      <a-form-model-item label="项目标识" prop="projectId" style="display: none;">
        <a-input disabled aria-readonly v-model="project.id"/>
      </a-form-model-item>
      <a-form-model-item label="项目名称" prop="projectName">
        <a-input disabled aria-readonly v-model="project.projectName"/>
      </a-form-model-item>
      <a-form-model-item label="接口分组:" prop="interfaceGroupId">
        <a-tree-select
          :replaceFields="replaceFields"
          @change="handlerInterfaceGroupSelect"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="groupPaths"
          placeholder="请选择接口分组"
          v-model="data.interfaceGroupId"
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item v-show="isEdit()" label="唯一标识">
        <a-input disabled aria-readonly v-model="data.id"/>
      </a-form-model-item>
      <a-form-model-item label="接口名称:" prop="interfaceName">
        <a-input v-model="data.interfaceName"/>
      </a-form-model-item>
      <a-form-model-item label="接口地址:" prop="requestUrl">
        <a-input v-model="data.requestUrl"/>
      </a-form-model-item>
      <a-form-model-item label="请求类型:" prop="requestMethod">
        <a-select default-value="normal" v-model="data.requestMethod" @change="changeInterfaceRequestType">
          <a-select-option v-for="(type, key) in requestTypes" :value="type" :key="key">
            {{ type }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="发布状态:" prop="interfaceStateId">
        <a-select default-value="normal" v-model="data.interfaceStateId" @change="changeInterfaceState">
          <a-select-option v-for="item in interfaceState" :value="item.stateName" :key="item.stateName">
            {{ item.description }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="接口信息:" prop="description">
        <a-input type="textarea" v-model="data.description"/>
      </a-form-model-item>
      <a-form-model-item label="启用状态:">
        <a-switch :default-checked="false" :checked="data.enable==1" @change="changeInterfaceEnable"/>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
  import projectManageService from '@/api/projectManageService'

  export default {
    name: 'ProjectInterfaceFormCtl',
    data() {
      return {
        rules: {
          interfaceGroupId: [
            {required: true, message: '请选择接口所属分组', trigger: 'blur'}
          ],
          interfaceName: [
            {required: true, message: '请输入接口名称', trigger: 'blur'},
            {min: 1, max: 60, message: '长度不得超过60'}
          ],
          requestUrl: [
            {required: true, message: '请输入接口地址', trigger: 'blur'}
          ],
          requestMethod: [
            {required: true, message: '请选择接口类型', trigger: 'blur'}
          ],
          interfaceStateId: [
            {required: true, message: '请选择接口发布状态', trigger: 'blur'}
          ]
        },
        replaceFields: {
          children: 'children',
          title: 'name',
          key: 'id',
          value: 'id'
        },
        requestTypes: ['GET', 'POST', 'HEAD', 'PUT', 'DELETE', 'OPTIONS', 'TRACE', 'CONNECT ', 'PATCH'],
        layout: {
          labelCol: {span: 4},
          wrapperCol: {span: 18}
        },
        groupPaths: [],
        interfaceState: [],
      }
    },
    model: {
      prop: 'data'
    },
    props: {
      showId: {
        type: Boolean,
        default: false
      },
      project: {
        type: Object,
        default: () => ({})
      },
      data: {
        type: Object,
        default: () => ({})
      }
    },
    mounted() {
      //this.$set(this.data, 'interfaceGroupId', undefined);
      this.loadInterfaceGroup();
      this.loadInterfaceState();
    },
    methods: {
      isEdit() {
        return this.showId && (!!this.data.id);
      },
      getData() {
        return this.data;
      },
      setData(data) {
        data = data || {};
        this.data = data;
      },
      validate() {
        return this.$refs.form.validate()
      },
      loadInterfaceGroup() {
        let queryParams = {
          projectId: this.project.id,
          loadInterface: false
        }
        projectManageService.projectInterfaceGroupQuery(queryParams).then(
          (d) => {
            this.groupPaths = d;
          },
          (e) => {
          }
        )
      },
      loadInterfaceState() {
        projectManageService.projectInterfaceStateQuery().then(
          (d) => {
            this.interfaceState = d;
          },
          (e) => {
          }
        )
      },
      changeInterfaceEnable(checked) {
        this.$set(this.data, 'enable', checked)
      },
      handlerInterfaceGroupSelect(id, selectName, key) {
        this.$set(this.data, 'interfaceGroupId', id);
      },
      changeInterfaceRequestType(key) {
        this.$set(this.data, 'requestMethod', key);
      },
      changeInterfaceState(key) {
        this.$set(this.data, 'interfaceStateId', key);
      }
    }
  }
</script>
<style lang="less">
  .form-ctl {
    .ant-form-item {
      margin-bottom: 2px;
    }
    .show-default {
      display: flex;
      .ant-form-item {
        flex: 1;
        .ant-form-item-label {
          width: 33%;
        }
        .ant-form-item-control-wrapper {
          width: 67%;
        }
      }
    }
  }
</style>
